import { defineStore } from 'pinia'
import { darkTheme } from 'naive-ui'
import { ref } from 'vue'

export const useThemeStore = defineStore('theme', () => {
  // 从本地存储获取配置
  const savedSettings = JSON.parse(localStorage.getItem('themeSettings') || '{}')

  // 状态定义
  const darkMode = ref(savedSettings.darkMode || false)
  const primaryColor = ref(savedSettings.primaryColor || '#1890ff')
  const primaryHover = ref(savedSettings.primaryHover || '#40a9ff')
  const primaryActive = ref(savedSettings.primaryActive || '#096dd9')
  const primaryBg = ref(savedSettings.primaryBg || '#e6f4ff')
  const navMode = ref(savedSettings.navMode || 'sidebar')
  const animation = ref(savedSettings.animation || 'fade')
  const componentSize = ref(savedSettings.componentSize || 'medium')

  // Actions
  const updateSettings = (settings) => {
    if (settings.darkMode !== undefined) darkMode.value = settings.darkMode
    if (settings.primaryColor !== undefined) primaryColor.value = settings.primaryColor
    if (settings.primaryHover !== undefined) primaryHover.value = settings.primaryHover
    if (settings.primaryActive !== undefined) primaryActive.value = settings.primaryActive
    if (settings.primaryBg !== undefined) primaryBg.value = settings.primaryBg
    if (settings.navMode !== undefined) navMode.value = settings.navMode
    if (settings.animation !== undefined) animation.value = settings.animation
    if (settings.componentSize !== undefined) componentSize.value = settings.componentSize
    
    saveSettings()
    applySettings()
  }

  const resetSettings = () => {
    darkMode.value = false
    primaryColor.value = '#1890ff'
    primaryHover.value = '#40a9ff'
    primaryActive.value = '#096dd9'
    primaryBg.value = '#e6f4ff'
    navMode.value = 'sidebar'
    animation.value = 'fade'
    componentSize.value = 'medium'
    
    saveSettings()
    applySettings()
  }

  const saveSettings = () => {
    localStorage.setItem('themeSettings', JSON.stringify({
      darkMode: darkMode.value,
      primaryColor: primaryColor.value,
      primaryHover: primaryHover.value,
      primaryActive: primaryActive.value,
      primaryBg: primaryBg.value,
      navMode: navMode.value,
      animation: animation.value,
      componentSize: componentSize.value
    }))
  }

  const applySettings = () => {
    const root = document.documentElement
    
    // 应用深色模式
    root.classList.toggle('dark', darkMode.value)
    
    // 应用主题色
    root.style.setProperty('--primary-color', primaryColor.value)
    root.style.setProperty('--primary-hover', primaryHover.value)
    root.style.setProperty('--primary-active', primaryActive.value)
    root.style.setProperty('--primary-bg', primaryBg.value)
    
    // 应用导航模式
    root.setAttribute('data-nav-mode', navMode.value)
    
    // 应用动画效果
    root.setAttribute('data-animation', animation.value)
    
    // 应用组件尺寸
    root.setAttribute('data-size', componentSize.value)
    
    // 更新 naive-ui 主题
    if (darkMode.value) {
      document.body.style.colorScheme = 'dark'
    } else {
      document.body.style.colorScheme = 'light'
    }
  }

  return {
    darkMode,
    primaryColor,
    primaryHover,
    primaryActive,
    primaryBg,
    navMode,
    animation,
    componentSize,
    updateSettings,
    resetSettings,
    saveSettings,
    applySettings
  }
}) 